import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Form, Input, Modal,  Divider,Card,Switch,Badge,message  } from 'antd';
import {Map, Marker, NavigationControl,MapTypeControl,ScaleControl,OverviewMapControl, InfoWindow,TrafficLayer,Road} from 'react-bmap'  ;
import DescriptionList from '../../DescriptionList/index';
import MsgImage from '../MsgImage'
import styles from './index.less';
const FormItem = Form.Item;
const { TextArea } = Input;
const { Description } = DescriptionList;
//消息来源
const sourceMap = ['来自微信', '来自APP','平台发布'];
//是否审核
const auditMap = ["待审","已审待播","已审已播","导播忽略","主播忽略"];
//消息类型
const messageTypeMap = ['互动','寻人','寻物','车辆求助','寻找失主','其他'];
//语音消息动态图
const radioDetailImageSrcs = [require("../../../../public/audioImage3.png"),require("../../../../public/audioImage4.gif") ];
class MsgOtherDetail extends PureComponent {
  state = {
    previewVisible: false,
    replayVisible: false,
    previewImageSrc: '',
    replayMessageValue:""
  };
  componentWillReceiveProps(nextProps){
    if(nextProps.selectedRowData !== undefined){
      var curMsgRadioDetail =  document.getElementById("curRadioMsgImage");
      if(curMsgRadioDetail != undefined ){
        curMsgRadioDetail.src = radioDetailImageSrcs[0];
      }
    }
  }
  /**
   * 打开和关闭图片显示
   */
  handleImageModalShow = (imgSrc) => {
    this.setState({
      previewImageSrc: imgSrc,
      previewVisible: true,
    });
  }
  handleImageModalCancel = () => {
    this.setState({ previewVisible: false })
  }

  /**
   * 打开实时路况
   * @param checked
   */
  openShishiRold = (checked) => {
    checked == true ? alert("您打开了实时路况显示") : alert("您关闭了实时路况显示") ;
  }


  /**
   * 打开消息回复窗口
   * @param flag
   */
  handleShowReplayModal = (flag) => {
    this.setState({
      replayVisible: !!flag,
    });
  }

  handleReplayMessage = (helpId,userId) => {
    const replayMessageValue = this.state.replayMessageValue;
    this.props.handleReplayMessage(helpId,userId,replayMessageValue);
    this.setState({
      replayVisible: false,
      replayMessageValue:""
    });
  }

  handleAddReplayMessageValue = (e) => {
      this.setState({
        replayMessageValue: e.target.value,
      });
  }

  /**
   * 一键推送 求助消息
   * @param helpId
   */
  handlePushMsgHelp = (helpId) => {
    this.props.handlePushMsgHelp(helpId);
  }
  /**
   * 语音播放
   * */
  handleCurMsgMusicPlay= () => {

    var audioCurMsg = this.refs.audioCurMsgMusicPlay;
    var curMsgRadioDetail =  document.getElementById("curRadioMsgImage");

    audioCurMsg.onended = function () {
      curMsgRadioDetail.src = radioDetailImageSrcs[0];
    }
    if(audioCurMsg.paused){
      curMsgRadioDetail.src = radioDetailImageSrcs[1];
      audioCurMsg.play();
    }else{
      curMsgRadioDetail.src = radioDetailImageSrcs[0];
      audioCurMsg.pause();
    }
  }
  render() {
    const {previewVisible, previewImageSrc, replayVisible, replayMessageValue} = this.state;
    const {selectedRowData} = this.props;
    return (
      <div style={{height: "auto"}}>
        <Card bordered={false}>
          <DescriptionList style={{marginBottom: 16}} col={2}>
            <Description term="时间">{moment(selectedRowData.msgTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="审核">
              <span>{auditMap[selectedRowData.status]}</span>
              <Button type="primary" style={{marginLeft: 40}} size="small"
                      onClick={() => this.handleShowReplayModal(true)}>回复消息
              </Button>
            </Description>
            <Description term="类型">{messageTypeMap[selectedRowData.msgType]}</Description>
            <Description term="来源">{sourceMap[selectedRowData.messageFrom]}</Description>
          </DescriptionList>
          <Divider style={{marginBottom: 16}}/>
          <DescriptionList style={{marginBottom: 16}} col={1}>
            <Description term="求助人">{selectedRowData.seekerName}</Description>
            {
              selectedRowData.seekVoice == "" ?  <Description term="求助描述">{selectedRowData.seekDes}</Description> :
                <Description term="求助语音">
                  <div style={{marginLeft:2}}>
                    <div onClick={() => this.handleCurMsgMusicPlay()} style={{float:"left", height:26,width:135,backgroundImage:"url("+require("../../../../public/audioImage.png")+")",cursor:"pointer" }}>
                      <img src={radioDetailImageSrcs[0]} id="curRadioMsgImage" style={{marginLeft:10, height:26,width:26}}/>
                    </div>
                    <div style={{float:"left",marginTop:3}}>{selectedRowData.radioLen}"</div>
                  </div>
                </Description>
            }
            <Description term="联系人">{selectedRowData.contacts}</Description>
            <Description term="联系电话">{selectedRowData.contactsTell}</Description>
            <Description term="求助位置"></Description>
          </DescriptionList>
          <Card>
            {
              selectedRowData.positionCoor == null ? "" : (
                <Map center={{
                  lng: selectedRowData.positionCoor.split(",")[0],
                  lat: selectedRowData.positionCoor.split(",")[1]
                }} zoom="18">
                  <Marker position={{
                    lng: selectedRowData.positionCoor.split(",")[0],
                    lat: selectedRowData.positionCoor.split(",")[1]
                  }}/>
                  <NavigationControl/>
                  <MapTypeControl/>
                  <ScaleControl/>
                  <OverviewMapControl/>
                  <InfoWindow position={{
                    lng: selectedRowData.positionCoor.split(",")[0],
                    lat: selectedRowData.positionCoor.split(",")[1]
                  }} text={selectedRowData.positionName} title=""/>
                </Map>
              )
            }
          </Card>
        </Card>
        {
          selectedRowData.photoInfo == "" ? "": <Card bordered={false}>
            <DescriptionList style={{marginBottom: 16}} col={1}>
              <Description term="求助照片"></Description>
            </DescriptionList>
            <MsgImage
              imageSrc={selectedRowData.photoInfo}
              handleImagePlay={(imgSrc) => this.handleImageModalShow(imgSrc)}
            />
            <Modal visible={previewVisible} footer={null} onCancel={this.handleImageModalCancel}>
              <img alt="example" style={{width: '100%'}} src={previewImageSrc}/>
            </Modal>
          </Card>
        }
        <Card bordered={false}>
          <div style={{float: 'right'}}>
            <Button type="primary" onClick={() => this.handlePushMsgHelp(selectedRowData.helpId)}>一键推送</Button>
          </div>
          <Modal
            title="消息回复"
            visible={replayVisible}
            onOk={() => this.handleReplayMessage(selectedRowData.helpId,selectedRowData.userId)}
            onCancel={() => this.handleShowReplayModal(false)}
            okText="发送"
          >
            <FormItem
              labelCol={{span: 5}}
              wrapperCol={{span: 15}}
              label="描述"
            >
              <TextArea rows={5} placeholder="请输入" onChange={this.handleAddReplayMessageValue}
                        value={replayMessageValue}/>
            </FormItem>
          </Modal>
        </Card>
        <Card bordered={false}>
          <DescriptionList col={1}>
            <Description term="提示:"> 推送成功后，求助信息将会显示到APP中寻人寻物界面，可提示热心听众在APP中查看详情。</Description>
          </DescriptionList>
        </Card>
        {/* 音乐播放组件*/}
        <audio ref="audioCurMsgMusicPlay"
               style={{display:"none"}}
               src={selectedRowData.seekVoice}
               preload={"auto"}
        > 您当前的浏览器不支持该播放控件
        </audio>
      </div>
    );
  }
}

export default MsgOtherDetail ;
